<template>
	<!-- 商品组 -->
	<view class="diy-bargainGoods" :style="{ background: itemStyle.background }">
		<view class="goods-item dis-flex" v-for="dataItem in dataList" :key="dataItem.active_id">
			<form @submit="onTargetGoods" report-submit="true" :data-id="dataItem.active_id">
				<button formType="submit" class="btn-normal dis-flex">
					<view class="goods-item--container dis-flex">
						<!-- 商品图片 -->
						<view class="goods-image"><image class="image" :src="dataItem.goods_image"></image></view>
						<view class="goods-info">
							<!-- 商品名称 -->
							<view class="goods-name">
								<text class="twolist-hidden">{{ dataItem.goods_name }}</text>
							</view>
							<!-- 参与的用户头像 -->
							<view v-if="dataItem.helps_count > 0" class="peoples dis-flex">
								<view class="user-list dis-flex">
									<view v-for="(help, index) in dataItem.helps" :key="index" class="user-item-avatar"><image class="image" :src="help.user.avatarUrl"></image></view>
								</view>
								<view class="people__text">
									<text>{{ dataItem.helps_count }}人正在砍价</text>
								</view>
							</view>
							<!-- 商品原价 -->
							<view class="goods-price">
								<text>￥{{ dataItem.original_price }}</text>
							</view>
							<!-- 砍价低价 -->
							<view class="floor-price">
								<text class="small">最低￥</text>
								<text class="big">{{ dataItem.floor_price }}</text>
							</view>
							<!-- 操作按钮 -->
							<view class="opt-touch">
								<view class="touch-btn"><text>立即参加</text></view>
							</view>
						</view>
					</view>
				</button>
			</form>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object,
		dataList: Array
	},
	data() {
		return {};
	},
	methods: {
		/**
		 * 跳转商品详情页
		 */
		onTargetGoods(e) {
			// 记录formid
			this.navigateTo({
				url: '/pages/bargain/goods/index?active_id=' + e.currentTarget.dataset.id
			});
		}
	}
};
</script>

<style>
/* common.wxss */

/* 砍价商品 */

.goods-item {
	margin-bottom: 20rpx;
	background: #fff;
	padding: 20rpx 16rpx;
}

.goods-item:last-child {
	margin-bottom: 0;
}

.goods-item .goods-image .image {
	display: block;
	width: 220rpx;
	height: 220rpx;
}

.goods-item .goods-info {
	width: 498rpx;
	padding-top: 8rpx;
	margin-left: 15rpx;
	position: relative;
}

.goods-item .goods-info .goods-name {
	font-size: 28rpx;
	min-height: 60rpx;
}

/* 正在参与的用户 */

.goods-item .goods-info .peoples {
	margin-top: 15rpx;
}

.goods-item .goods-info .peoples .user-list {
	margin-right: 10rpx;
}

.goods-item .goods-info .peoples .user-list .user-item-avatar {
	margin-left: -8rpx;
}

.goods-item .goods-info .peoples .user-list .user-item-avatar:first-child {
	margin-left: 0;
}

.goods-item .goods-info .peoples .user-list .user-item-avatar .image {
	display: block;
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
}

.goods-item .goods-info .peoples .people__text {
	font-size: 24rpx;
	color: #818181;
}

/* 商品原价 */

.goods-item .goods-info .goods-price {
	margin-top: 15rpx;
	color: #818181;
	font-size: 25rpx;
	text-decoration: line-through;
}

/* 砍价底价 */

.goods-item .goods-info .floor-price {
	color: #fc1e56;
}

.goods-item .goods-info .floor-price .small {
	font-size: 24rpx;
}

.goods-item .goods-info .floor-price .big {
	font-size: 32rpx;
}

/* 立即参加按钮 */

.opt-touch {
	position: absolute;
	bottom: 0;
	right: 10rpx;
}

.touch-btn {
	color: #fff;
	font-size: 28rpx;
	background: #d3a975;
	border-radius: 30rpx;
	padding: 10rpx 28rpx;
}
</style>
